<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>常见问题frm</title>
  	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
  	<link rel="stylesheet" type="text/css" href="../../css/common.css">
    <style>
        /*头部*/
        .aui-row{padding:0.2rem 0.5rem 0.2rem 0.5rem;}
        .aui-grid [class*=aui-col-] {padding: 0.2rem 0;}
        .aui-row img{width: 1.5rem !important;height: 1.5rem !important;margin: 0 auto;}
        .searchBox{background: #fff;padding-top: 0.4rem;}
        .aui-searchbar-input{margin: 0 1rem;padding: 0px;height: 1rem}
        .searchBox input{width: 100%;background: #eee;border: 1px solid #eee;height: 1rem;margin: 0 auto;
          border-radius: 0.5rem;font-size:0.373rem; padding-left:1rem;display: flex;align-items: center;}
        .iconsousuo1{font-size: 0.373rem !important;line-height: 1rem !important;color:#ff4c41;display: block;
          padding-right: 0.2rem;position: absolute;left: 0.4rem}
        .iconsousuo1:before {content: "\e602";}
        /*列表部分*/
        .aui-list{background-image: none;}
        .aui-list .aui-list-item{min-height:1.2rem;}
        .aui-list.aui-list-in .aui-list-item{background-position:0rem bottom;padding-left:0.5rem;
          background-image: linear-gradient(0,#ededed,#ededed 50%,transparent 50%);
          background-image: -webkit-linear-gradient(90deg,#ededed,#ededed 50%,transparent 50%);display: block;}
        .aui-list .aui-list-item-inner{min-height:1.2rem;max-height:1.2rem;height:1.2rem;}
        .aui-list-item-inner.aui-list-item-arrow{padding-right: 1rem;}
        .aui-list-item-arrow:before{right: 0.5rem;width: 0.3rem;height: 0.3rem;margin-top: -0.15rem;}
        .aui-list .aui-list-item-title{ overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
        /*箭头修改*/
        .aui-list-item-arrowdown:before{right: 0.5rem;width: 0.3rem;height: 0.3rem;margin-top:-0.3rem;
          content: '';position: absolute;top: 50%;background: transparent;border: 1px solid #dddddd;
          border-top: none;border-right: none;z-index: 2;-webkit-border-radius: 0;border-radius: 0;
          -webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
        .itemMsgBox{display:none;padding:0.1rem 0.2rem 0.2rem 0;}
        .itemMsgBox p{font-size:0.373rem;}
    </style>
</head>
<body id="warp">
    <div class="aui-content aui-margin-b-15" id="app"  v-cloak>
        <div class="aui-margin-b-5">
            <div class="searchBox">
                <div class="aui-searchbar-input aui-border-radius">
                    <span class="iconfont iconsousuo1"></span>
                    <form action="javascript:search();" style="width: 100%;">
                        <input type="search" placeholder="找不到问题，来这里搜索一下" id="search-input">
                    </form>
                </div>
            </div>
            <section class="aui-grid">
                <div class="aui-row">
                    <div class="aui-col-xs-3" v-for="(item,index) in data1" @click="openProblemListFun(item.id,item.name)">
                        <img :src=urlFun(item.icon) />
                        <div class="aui-grid-label sg-text-size32">{{item.name}}</div>
                    </div>
                </div>
            </section>
        </div>
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item aui-list-item-middle" v-for="(item,index) in data2">
                <div class="aui-list-item-inner aui-list-item-arrow"  @click="showItemFun(index)">
                    <div class="aui-list-item-title sg-text-size32 sg-color-font2">{{index + 1}}、{{item.question}}</div>
                </div>
                <div class="itemMsgBox sg-text-size28 sg-color-font2" v-html="item.answer">
                    {{item.answer}}
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app;
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    // 初始化数据
    initializeData();
    // 获取常见问题分类
    loadData1Fun();
    // 获取常见问题分类
    loadData2Fun();
}

// 初始化数据
function initializeData(){
    app = new Vue({
        el: '#app',
        data: {
            page: 1, //当前页数
            pageNum: 10, //每页行数
            whetherToLoading: false, //页面是否在加载中
            data1: [], //数据对象(问题分类数据)
            data2: [],//热门问题分类列表
            pullLoad: '正在加载中...'
        }
    });
}

//问题分类数据
function loadData1Fun(){
    $api.ajax({
        url: "api/faq/type_list",
        method: 'get',
    }, function (ret,err){
        if(ret){
            if(ret.data.list.length>0){
                app.data1 = ret.data.list;
            }
        }else {
            api.toast({
                msg: '网络错误,请稍后重试',
                duration: 1000,
                location: 'middle'
            });
        }
    })
}

// 获取热门问题列表数据
function loadData2Fun(){
    $api.ajax({
        url: "api/faq/list",
        method: 'get',
        data:{
            values:{
                type_id:1
            }
        }
    }, function (ret,err){
        if(ret){
            // console.log(JSON.stringify(ret));
            if(ret.data.list.length>0){
                app.data2 = ret.data.list;
            }
        }else {
            api.toast({
                msg: '网络错误,请稍后重试',
                duration: 1000,
                location: 'middle'
            });
        }
    })
}

// 跳转当前问题分类列表页面
function openProblemListFun(id,name){
    api.openTabLayout({
        name: 'commonProblemList',
        url: '../me/commonProblemList_win.html',
        useWKWebView: true,
        bgColor: '#fff',
        pageParam:{
            typeId:id,
            typeName:name
        }
    });
}

// 展示当前对应显示的项目，并隐藏之前展示的项目
function showItemFun(index){
    var domStatus = document.getElementsByClassName("itemMsgBox")[index];
    if($api.cssVal(domStatus,'display') == 'none'){
        // 显示当前项内容
        $api.css(domStatus,'display:block;');
        //箭头样式
        document.querySelectorAll(".itemMsgBox")[index].parentNode.firstElementChild.className = 'aui-list-item-inner aui-list-item-arrowdown'
    }else{
        // 隱藏当前项内容
        $api.css(domStatus,'display:none;');
        // 箭头样式
        document.querySelectorAll(".itemMsgBox")[index].parentNode.firstElementChild.className = 'aui-list-item-inner aui-list-item-arrow'
    }
}

// 执行问题搜索
function search(){
    if(document.getElementById("search-input").value != ''){
        api.openTabLayout({
            name: 'commonProblemList',
            url: '../me/commonProblemList_win.html',
            useWKWebView: true,
            bgColor: '#fff',
            pageParam:{
                typeId:0,
                questionName:document.getElementById("search-input").value
            }
        });
    }
}

//问题分类图片链接拼接
function urlFun(url){
		var url =  $api.baseUrl + url
		return url;
}
</script>
</html>
